<template>
  <el-row>
    <el-col :span="8">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="公告内容">
          <el-input type="textarea" :rows="10" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="form.enable"></el-switch>
        </el-form-item>
        <el-form-item label="是否置顶">
          <el-switch v-model="form.top"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">添加公告</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-col :span="14" :offset="1">
      <el-table :data="tableData" stripe style="width: 100%" :show-overflow-tooltip="true" align="center" height="700">
        <el-table-column prop="date" label="公告时间" fixed="left" align="center"></el-table-column>
        <el-table-column prop="author" label="发布者" align="center"></el-table-column>
        <el-table-column prop="isEnable" label="是否启用" align="center"></el-table-column>
        <el-table-column prop="isTop" label="是否置顶" align="center"></el-table-column>
        <el-table-column prop="option" label="操作" align="center"></el-table-column>
      </el-table>

      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       layout=" prev, pager, next" :total="30">
        </el-pagination>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: "blog",
    data() {
      return {
        form: {
          content: '',
          top: '',
          enable: ''
        },
        tableData: [],
        currentPage: 1
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style scoped>
  .page {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
</style>
